<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:common="http://www.contact.common.com/contacts/ui"
      xmlns:a4j="http://richfaces.org/a4j">
<ui:component>
<style type="text/css">
    .left {
        float: left;
        text-align: left;
    }

    .right {
        float: right;
        text-align: right;
    }

    .colorGrayBold {
        font-weight: bold;
        color: gray;
    }

    .fontBold {
        font-weight: bold;
    }

    .padding0 {
        padding: 0;
    }

    .paddingTop40 {
        padding-top: 60px;
    }
    .ourMargin{
        margin-right:20px;
        margin-left:20px;
        margin-top:20px;
    }
</style>

<rich:panel
        style="overflow:auto; width:100%; border:none;"
        bodyClass="rich-laguna-panel-no-header, paddingTop40">

    <!--<common:oneControlRow id="nameControl"-->
    <!--leftTopText="Name"-->
    <!--leftBottomText="Your real Name"-->
    <!--rightBottomText="Petar Popovic"-->
    <!--editPanel="nameEditPanel"/>-->

    <!--<a4j:outputPanel id="nameEditPanel" style="display:none">-->
    <!--<h:outputLabel value="SHOWWW"/>-->
    <!--</a4j:outputPanel>-->
    <!--TODO treba koristeci oneControlRow da se ubije redutantnost-->

    <a4j:outputPanel layout="none">
        <rich:panel id="changerMessage"
                    bodyClass="rich-laguna-panel-no-header"
                    style="margin:5px;text-align:center;"
                    rendered="#{not empty accountEditBean.changed}"
                >
            <h:outputText value="#{accountEditBean.changed}"/>
        </rich:panel>
    </a4j:outputPanel>

    <h:panelGrid columns="1" width="100%" style="border: 1px solid gray; background: #F7F7F7;">
        <h:panelGrid columns="1" cellpadding="0" cellspacing="0" styleClass="ourMargin">
            <a4j:outputPanel layout="block" style="widht:100%">
                <a4j:outputPanel layout="block" styleClass="left">
                    <h:outputLabel value="Name" styleClass="fontBold"/>
                </a4j:outputPanel>
                <a4j:outputPanel layout="block" styleClass="right">
                    <a4j:commandLink id="showName" value="Change" style="display:block;"
                                     styleClass="fontBold"
                                     onclick="
                                     #{rich:element('hideName')}.style.display='block';
                                     #{rich:element('representName')}.style.display='none';
                                     #{rich:element('editPanelName')}.style.display='block';
                                     this.style.display='none';
                                  "/>
                    <a4j:commandLink id="hideName" value="Hide" style="display:none;"
                                     styleClass="fontBold"
                                     onclick="
                                      #{rich:element('showName')}.style.display='block';
                                      #{rich:element('representName')}.style.display='block';
                                      #{rich:element('editPanelName')}.style.display='none';
                                 this.style.display='none';"/>
                </a4j:outputPanel>
            </a4j:outputPanel>

            <rich:separator height="1px" width="600px"/>

            <a4j:outputPanel id="representName" layout="block" style="width:100%;">
                <a4j:outputPanel layout="block" styleClass="left">
                    <h:outputLabel value="Your real name." styleClass="colorGrayBold"/>
                </a4j:outputPanel>
                <a4j:outputPanel layout="block" styleClass="right">
                    <h:outputLabel id="fullName" value="#{accountSessionBean.fullName}" styleClass="colorGrayBold"/>
                </a4j:outputPanel>
            </a4j:outputPanel>

            <a4j:form id="editPanelName" style="width:500px; display:none">
                <ui:include src="nameEdit.xhtml"/>

            </a4j:form>

        </h:panelGrid>

        <!--TODO Username-->
        <h:panelGrid columns="1" cellspacing="0"  styleClass="ourMargin">
            <a4j:outputPanel layout="block" style="widht:500px ">
                <a4j:outputPanel layout="block" styleClass="left">
                    <h:outputLabel value="Username" styleClass="fontBold"/>
                </a4j:outputPanel>
                <a4j:outputPanel layout="block" styleClass="right">
                    <a4j:commandLink id="showUsername" value="Change" style="display:block;"
                                     styleClass="fontBold"
                                     onclick="
                                      #{rich:element('hideUsername')}.style.display='block';
                                      #{rich:element('representUsername')}.style.display='none';
                                      #{rich:element('editPanelUsername')}.style.display='block';
                                     this.style.display='none';
                                  "/>
                    <a4j:commandLink id="hideUsername" value="Hide" style="display:none;"
                                     styleClass="fontBold"
                                     onclick="
                                      #{rich:element('showUsername')}.style.display='block';
                                      #{rich:element('representUsername')}.style.display='block';
                                      #{rich:element('editPanelUsername')}.style.display='none';
                                 this.style.display='none';"/>
                </a4j:outputPanel>
            </a4j:outputPanel>

            <rich:separator height="1px" width="600px"/>

            <a4j:outputPanel id="representUsername" layout="block" style="width:100%; ">
                <a4j:outputPanel layout="block" styleClass="left">
                    <h:outputLabel value="Your username." styleClass="colorGrayBold"/>
                </a4j:outputPanel>
                <a4j:outputPanel layout="block" styleClass="right">
                    <h:outputLabel id="username" value="#{accountSessionBean.account.user.username}" styleClass="colorGrayBold"/>
                </a4j:outputPanel>
            </a4j:outputPanel>

            <a4j:form id="editPanelUsername" style="width:100%; display:none; ">
                  <ui:include src="usernameEdit.xhtml"/>
            </a4j:form>

        </h:panelGrid>
        <!--TODO Email-->
        <h:panelGrid columns="1" cellpadding="0" cellspacing="0"  styleClass="ourMargin">
            <a4j:outputPanel layout="block" style="widht:500px ">
                <a4j:outputPanel layout="block" styleClass="left">
                    <h:outputLabel value="Email" styleClass="fontBold"/>
                </a4j:outputPanel>
                <a4j:outputPanel layout="block" styleClass="right">
                    <a4j:commandLink id="showEmail" value="Change" style="display:block;"
                                     styleClass="fontBold"
                                     onclick="
                                      #{rich:element('hideEmail')}.style.display='block';
                                      #{rich:element('representEmail')}.style.display='none';
                                      #{rich:element('editPanelEmail')}.style.display='block';
                                      this.style.display='none';
                                  "/>
                    <a4j:commandLink id="hideEmail" value="Hide" style="display:none;"
                                     styleClass="fontBold"
                                     onclick="
                                        #{rich:element('showEmail')}.style.display='block';
                                      #{rich:element('representEmail')}.style.display='block';
                                      #{rich:element('editPanelEmail')}.style.display='none';
                                      this.style.display='none';"/>
                </a4j:outputPanel>
            </a4j:outputPanel>

            <rich:separator height="1px" width="600px"/>

            <a4j:outputPanel id="representEmail" layout="block" style="width:100%; ">
                <a4j:outputPanel layout="block" styleClass="left">
                    <h:outputLabel value="Set another email to login." styleClass="colorGrayBold"/>
                </a4j:outputPanel>
                <a4j:outputPanel layout="block" styleClass="right">
                    <h:outputLabel id="email" value="#{profileSessionBean.information.mailId}" styleClass="colorGrayBold"/>
                </a4j:outputPanel>
            </a4j:outputPanel>

            <a4j:form id="editPanelEmail" style="width:100%; display:none;">
                <ui:include src="emailEdit.xhtml"/>
            </a4j:form>

        </h:panelGrid>
        <!--TODO Password-->
        <h:panelGrid columns="1" cellpadding="0" cellspacing="0"  styleClass="ourMargin">
            <a4j:outputPanel layout="block" style="widht:500px ">
                <a4j:outputPanel layout="block" styleClass="left">
                    <h:outputLabel value="Password" styleClass="fontBold"/>
                </a4j:outputPanel>
                <a4j:outputPanel layout="block" styleClass="right">
                    <a4j:commandLink id="showPassword" value="Change" style="display:block;"
                                     styleClass="fontBold"
                                     onclick="
                                      #{rich:element('hidePassword')}.style.display='block';
                                      #{rich:element('representPassword')}.style.display='none';
                                      #{rich:element('editPanelPassword')}.style.display='block';
                                      this.style.display='none';
                                  "/>
                    <a4j:commandLink id="hidePassword" value="Hide" style="display:none;"
                                     styleClass="fontBold"
                                     onclick="
                                  #{rich:element('showPassword')}.style.display='block';
                                  #{rich:element('representPassword')}.style.display='block';
                                  #{rich:element('editPanelPassword')}.style.display='none';
                                 this.style.display='none';"/>
                </a4j:outputPanel>
            </a4j:outputPanel>

            <rich:separator height="1px" width="600px"/>

            <a4j:outputPanel id="representPassword" layout="block" style="width:100%; ">
                <a4j:outputPanel layout="block" styleClass="left">
                    <h:outputLabel value="What you use to login." styleClass="colorGrayBold"/>
                </a4j:outputPanel>
                <a4j:outputPanel layout="block" styleClass="right">
                    <h:outputLabel value="#{accountBean.mailStars}" styleClass="colorGrayBold"/>
                </a4j:outputPanel>
            </a4j:outputPanel>

            <a4j:form id="editPanelPassword" style="width:100%; display:none">
                 <ui:include src="passwordEdit.xhtml"/>
            </a4j:form>

        </h:panelGrid>

        <h:panelGrid columns="1" cellpadding="0" cellspacing="0" style=" margin:20px; margin-bottom:20px;">
            <a4j:outputPanel layout="block" style="widht:500px ">
                <a4j:outputPanel layout="block" styleClass="left">
                    <h:outputLabel value="Removing Account" styleClass="fontBold"/>
                </a4j:outputPanel>
                <a4j:outputPanel layout="block" styleClass="right">
                    <a4j:commandLink  value="Delete" style="display:block;" styleClass="fontBold"
                                   onclick="Richfaces.showModalPanel('deactivingAccount');"
                            />
                </a4j:outputPanel>
            </a4j:outputPanel>

            <rich:separator height="1px" width="600px"/>
        </h:panelGrid>
    </h:panelGrid>

    <!--<common:modalPanel id="confirmWithPassword" header="Change Email" submitButton="Confirm">-->
        <!--<ui:define name="panelBody">-->
           <!--<h:outputLabel value="To change your email settings, please enter your YouConnect password.  "/>-->
            <!--<h:panelGrid columns="2">-->
            <!--<h:outputLabel value="#{resources.passwordLabel}:"/>-->
            <!--<h:inputSecret value="#{accountEditBean.password}"/>-->
            <!--</h:panelGrid>-->
        <!--</ui:define>-->
    <!--</common:modalPanel>-->

 <common:modalPanel id="deactivingAccount"
                    bean="#{accountEditBean}"
                    header="Deactivate Account"
                    submitButton="Confirm"
         >
        <ui:define name="panelBody">
           <h:outputLabel value="To delete account, please enter your YouConnect password.  "/>
            <h:panelGrid columns="2">
            <h:outputLabel value="#{resources.passwordLabel}"/>
            <h:inputSecret value="#{accountEditBean.password}"/>
            </h:panelGrid>
        </ui:define>
    </common:modalPanel>
</rich:panel>
</ui:component>
</html>
